<template>
  <view class="active-list">
    <u-tabs :list="list1" @click="click" :lineColor="'#f09a3c'"></u-tabs>
    <view class="active-content">
   
      <view class="">
        <view class="item card-list"  @click="openUrl('/pages/active/detail')" v-for="(item, index) in list" :key="index">
          <view class="card flex">
             <image src="@/static/images/home/avatar.png" class="pic" mode="aspectFill"></image>
            <view class="info flex-1">
              <view class="title wrap-2"
                >活動名稱活動名稱活動名稱活動名稱活動名稱活動名稱活動名稱</view
              >
              <view class="intro wrap"
                >活動詳情活動詳情活動詳情活動詳情活動詳情</view
              >
              <view class="flex flex-c flex-j">
                <view class="price"
                  ><view>2024-01-12</view>
                  </view>
                <view >
                  <u-button
                   v-if="cur==1&&index!=0"
                    type="warning"
                    shape="circle"
                    size="small"
                    text="編輯"
                    @click="openUrl('/pages/addActive/editActive')"
                    color="#2E2E33"
                    style="width: 80px"
                  ></u-button >
                  <u-button
                   v-if="cur==1&&index==0"
                    type="warning"
                    shape="circle"
                    size="small"
                    @click="openUrl('/pages/user/userList')"
                    text="報名情况"
                    color="#2E2E33"
                    style="width: 80px"
                  ></u-button >
                </view>
              </view>
            </view>
          </view>
        </view>
        <u-loadmore :status="status" />
      </view>
    </view>
   
  </view>
</template>

<script>
export default {
  data() {
    return {
      list1: [
        {
          name: '我報名的',
        }, {
           name: '我發起的',
        }
      ],
      cur:0,
      status: "loadmore",
      list: 15,
      page: 0,
    };
  },
  onLoad() {},
  onReachBottom() {
    if (this.page >= 3) return;
    this.status = "loading";
    this.page = ++this.page;
    setTimeout(() => {
      this.list += 10;
      if (this.page >= 3) this.status = "nomore";
      else this.status = "loading";
    }, 2000);
  },
  methods: {
    openUrl(url){
				uni.navigateTo({
					url:url
				});
			},
    click(e){
      console.log(e)
      this.cur=e.index
    }
  },
};
</script>

<style lang="scss">
.active-content {
  margin-top: 16px;
  padding-top: 24px;
  border-top: solid 1px #f0f0f0;
  .card-list {
    .card {
      margin-bottom: 20px;
      .pic {
        margin-right: 12px;
        width: 120px;
        height: 120px;
      }
      .title {
        line-height: 20px;
        color: #323233;
        font-weight: bold;
      }
      .intro {
        margin: 4px 0 24px;
        color: #9a9a9a;
        font-size: 14px;
      }
      .price {
        font-size: 14px;
        color: #9a9a9a;
      }
    }
  }
}
.active-list {
  padding: 10px 24px;

  .u-input {
    // height: 95%;
    height: 32px;
    padding: 0 18px;
    background: #f0f3f8;
    color: #333;
    text-indent: 5px;
    border-radius: 8px;
    font-size: 16px;
    border: 0;
  }
  .orange {
    z-index: 5;
    position: absolute;
    top: 0px;
    right: 0;
    background: orange;
    border-radius: 0 8px 8px 0;
    width: 45px;
    height: 45px;
  }
  .right {
    .u-icon {
      z-index: 15;
      padding-right: 10px;
    }
  }
  .select {
    position: relative;
    width: 70px;
    height: 45px;
    line-height: 45px;
    color: orange;
    font-size: 16px;
    background: #f0f3f8;
    border-radius: 10px;
    padding: 0 12px;
  }
}
</style>
